<template>
  <div class="business_personal_page">
    <div v-show="codeShow" class="login_container_box">
      <div class="login_container_middle">
        <span>
            <i class="el-icon-close close_code" @click="closeCode"></i>
           <div id="login_container"></div>
        </span>
       
      </div>
    </div>
    <el-container class="nav-box">
      <el-header>
        <el-row>
          <el-col class="logo-box" :span="6">
            <icon-font
              class="nav-logo"
              style="visibility: hidden;"
              icon="icon-global-001"
            />
            <span class="logo-name">
              <img :src="active_logo" alt="logo">
            </span>
          </el-col>
          <el-col :span="18" class="user-info" style="padding-right: 16px;">
            <!-- <el-dropdown>
              <div class="el-dropdown-link position">
                <div class="positionInfo">
                  <span>{{ positionCompanyName || companyName || '' }}</span>
                  <span>{{ positionName || '' }}</span>
                </div>
                <i
                  v-if="positionList.length"
                  class="el-icon-arrow-down el-icon--right"
                />
              </div>
              <el-dropdown-menu slot="dropdown" v-if="positionList.length">
                <el-dropdown-item
                  v-for="(item, index) in positionList"
                  :key="index"
                  @click.native="choosePosition(item.companyId)"
                  style="
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                  "
                >
                  <span>{{ item.companyName || ''}}</span>
                  <span>{{ item.positionName || ''}}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
            <!-- 用户信息，修改密码 -->
            <el-dropdown @command="handleDropdown">
              <span class="el-dropdown-link">
                {{ $store.state.userName || '--' }}
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="putPass">修改密码</el-dropdown-item> -->
                <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                <el-dropdown-item
                  v-show="showCompanyCenter"
                  command="enterPriseCenter"
                  >企业中心</el-dropdown-item
                >

                <el-dropdown-item command="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <div class="corver-box" style="background: white;">
          <div class="page_box">
            <div class="title">
              <el-image
              class="bgBusiness"
                :src="bgBusiness"
              />
            </div>
            <div class="search_box">
              <el-autocomplete
                class="autocomplete_box"
                popper-class="my-autocomplete"
                v-model="selectedCompanyName"
                :fetch-suggestions="querySearch"
                placeholder="请搜索企业名称（查看企业是否已认证）"
                @select="handleSelect">
                <el-image
                class="search_icon"
                :src="searchIcon"
              />
                <el-button @click="checkCompany" class="search_icon" slot="append">
                  <el-image
                    class="search_icon_image"
                    :src="searchIcon"
                  />
                </el-button>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.address }}</span>
                </template>
              </el-autocomplete>
            </div>
            <div class="user_title">尊敬的用户：</div>
            <div class="user_content">您尚未归属任何一个企业，可通过认证您的所在企业，或加入您的就职企业（已认证企业），就可以变成一名企业用户。成为企业用户后，您将享有更多功能</div>
            <div class="join_company">
              <div class="join_company_item">
                <el-image
                  class="quotes"
                  :src="quotes"
                />
                <el-image
                  class="certification"
                  :src="certification"
                />
              <div class="certification_box">
                  <div class="company_title">企业认证</div>
                  <ol class="company_add">
                    <li>创建您所在的企业</li>
                  </ol>
                  <el-button class="button_box" type="primary" @click="dialogShow">立即认证</el-button>
              </div>
              </div>
              <div class="join_company_item">
                <el-image
                  class="quotes"
                  :src="quotes"
                />
                <el-image
                  class="certification"
                  :src="bindIcon"
                />
                <div class="certification_box">
                  <div class="company_title">绑定企业</div>
                  <ol class="company_add">
                    <li>绑定已认证企业，成为该企业一员</li>
                  </ol>
                  <el-button class="button_box" type="primary" @click="dialogBindShow">立即绑定</el-button>
                </div>
              </div>
            </div>
            <el-dialog
              class="dialog_box"
              title="提示"
              :visible.sync="dialogVisible"
              width="388px"
            >
              <span>该企业未做企业认证，快去企业认证创建您所在的企业吧！</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="creatCompany">认 证</el-button>
              </span>
            </el-dialog>

            <el-dialog
              class="dialog_box"
              title="提示"
              :visible.sync="dialogBind"
              width="388px"
            >
              <p>该企业已完成企业认证，快去绑定该企业成为该企业一员吧！</p>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogBind = false">取 消</el-button>
                <el-button type="primary" @click="bindCompany">绑 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import auth from '@mixins/auth'
import {username} from '@const/formValidate.js'
import md5 from 'js-md5'
import {hasIn} from 'lodash'
import cookie from 'js-cookie'
import {
  fddWebQueryPersonalCertification,
  fddWebApplyPersonalCertification,
} from '@const/api_interfaceCenter'

import {
  companyRepeatCertification,
  personalRepeatCertification,
} from '@const/api_interface'
import {
  getCurrentUserInfo,
  bindingOpenPlatformWechat,
  unbindingWechat
} from '@const/api_staffCenter'
import {
 checkCompanyByName
} from '@const/api_authCenter'

import {
 listCompanyName
} from '@const/api_data_center'

import { companyNewListAuthCompanyBaseVO } from '@api/auth_center_v1.js'

import VerificationSuccess from '@/moduleComponents/personal'
import EditImage from '@assets/personl/touxiang.png'


import cropperUpload from '@/moduleComponents/personal/cropperUpload'
const TIME_COUNT = 60
export default {
  mixins: [auth],
  layout: 'blank',
  components: {VerificationSuccess, cropperUpload},
  data() {
    var checkPassword = (rule, value, callback) => {
      let reg = new RegExp(/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,20}$/)
      let result = reg.test(value)
      if (!result) {
        return callback(
          new Error('密码长度6~20位，数字、字母、字符至少包含两种')
        )
      } else {
        callback()
      }
    }
    var checkloginName = (rule, value, callback) => {
      let result =
        this.updateAccountForm.loginName === this.currentUserInfo.loginName
      if (!result) {
        return callback(new Error('请输入正确的原账号'))
      } else {
        callback()
      }
    }

    var checkPhone = (rule, value, callback) => {
      let reg = new RegExp(/^1[23456789][0-9]{9}$/)
      let result = reg.test(value)
      if (!result) {
        return callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    var checkEmail = (rule, value, callback) => {
      let reg = new RegExp(
        /^([a-zA-Z0-9]+[_|bai\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
      )
      let result = reg.test(value)
      if (!result) {
        return callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }

    return {
      active_logo: require('@assets/img/login/pc-caise-logo.png'),
      personIfCertification: '',
      cookie: cookie,
      codeShow:false,
      isBind:false,
      companys: [],
      state: '',
      bgBusiness: require("@assets/img/business/pc-gzt-rh-title@1x.png"),
      searchIcon: require("@assets/img/business/pc-gzt-ss-icon@3x.png"),
      quotes:  require("@assets/img/business/pc-gzt-qyrz-yh-img@2x.png"),
      certification: require("@assets/img/business/pc-gzt-qyrz-img@1x.png"),
      bindIcon: require("@assets/img/business/pc-gzt-bdqy-img@1x.png"),
      dialogVisible: false,
      dialogBind:false,
      selectedCompanyName: '',
      isCompany: false,
      companyResultData: {},
    }
    var checkPassword = (rule, value, callback) => {
      console.log('value:', value)
    }
  },
  mounted() {
   // 
  },
  computed: {
    showCompanyCenter() {
      return (this.$store.state.ifAdmin === 'true' && this.$store.state.companyId !== '0') || (this.$store.state.ifAdmin === true && this.$store.state.companyId !== '0')
    },
    ...mapState([
      'positionCompanyName',
      'companyName',
      'positionName',
      'positionList',
      'positionId',
    ]),

    showCompanyCode() {
      let companyCode = this.$store.state.companyCode
      return companyCode && companyCode !== 'null'
    },
    // 计算多个公司的展示
    customCompanyName() {
      return this.$store.state.companyName !== 'null'
        ? this.$store.state.companyName || '平台管理员'
        : '平台管理员'
    },
  },
  watch: {},
  methods: {
    //初始化当前用户基础信息
    getCurrentUserInfo() {
      this.$axios({
        method: 'post',
        url: getCurrentUserInfo,
        data: {},
      })
        .then((res) => {
          if (res.status === 200) {
            this.currentUserInfo = res.data.payload || {}
            this.userImage = this.currentUserInfo.avatar || EditImage
            this.isBind =  this.currentUserInfo.openid ? true : false
          }
          console.log('this.currentUserInfo:', this.currentUserInfo)
        })
        .finally(() => {})
    },
    //个人电子签章重新认证
    personalRecertification() {
      this.$axios
        .$get(personalRepeatCertification)
        .then((res) => {
          if (res.code === '0') {
            let obj = hasIn(res, 'payload') ? res.payload : {}
            if (obj.fddUrl) {
              window.open(obj.fddUrl, '_blank')
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .finally(() => {
          this.showPersonalDialog = false
        })
    },
    handlePersonalClose() {
      this.showPersonalDialog = false
    },
    handlePersonalShow() {
      this.showPersonalDialog = true
    },
   
    //重新登录
    againLogin() {
      this.$store.commit('logout')
      this.$router.replace(this.$PATH_CONST.login_page)
    },
    
    handleDropdown(command) {
      if (command === 'logout') {
        this.$store.commit(command)
        this.$router.replace(this.$PATH_CONST.login_page)
      } else if (command === 'putPass') {
        this.detailVisible = true
      } else if (command === 'userInfo') {
        // this.getUserInfo()
        // this.cardinformation()
        this.$router.push('/systemSetup/personal')
      } else if (command === 'enterPriseCenter') {
        this.toEnterpriseCenter()
      }
    },
    async queryPersonalCertification() {
      const personInfo = await this.$axios.get(fddWebQueryPersonalCertification)
      this.personIfCertification = hasIn(personInfo, [
        'data',
        'payload',
        'ifCertification',
      ])
        ? personInfo.data.payload.ifCertification
        : false
    },
    goCertification() {
      this.$axios.get(fddWebApplyPersonalCertification).then((res) => {
        const {data} = res
        if (!Number(data.code)) {
          const payload = data.payload
          const applyPersonUrl = payload.fddUrl
          window.open(applyPersonUrl, '_blank')
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    goCertificationAgain() {
      this.$axios({
        method: 'get',
        url: companyRepeatCertification,
      })
        .then((res) => {
          if (res.data.code === '0') {
            let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
            if (obj.fddUrl) {
              window.open(obj.fddUrl, '_blank')
            }
          } else {
            this.$message.error(data.msg)
          }
        })
        .finally(() => {
          this.showDialog = false
        })
    },
    // 切换岗位
    choosePosition(val) {
      if (this.positionId === val) {
        this.$message.error('当前已是该岗位')
        return false
      }
      let item = {
        positionId: val,
      }
      this.$store.dispatch('choosePosition', {item})
    },
    toEnterpriseCenter() {
      this.$router.push({path: '/enterpriseCenter'})
    },
    //返回首页
    home() {
      console.log('===aaa')
      this.$router.push('/')
    },
    bindingOpenPlatformWechat (code) {
      this.$axios({
        url: bindingOpenPlatformWechat,
        method: 'post',
        data: {
          code: code,
          source: 'm_pc_web'
        }
      })
        .then(res => {
          if (res.data.code === '0') {
            this.getCurrentUserInfo()
            this.$message({
              message: '微信绑定成功！',
              type: 'success'
            });
          }
          console.log('====res:', res)
        })
        .catch(err => {
          // reject(err);
        });
        console.log('====code:', code)
    },
    showCode() {
      this.codeShow = true
    },
    closeCode() {
      this.codeShow = false
    },
    unbind() {
      this.$axios({
        url: unbindingWechat,
        method: 'post',
        data: {}
      })
        .then(res => {
          if (res.data.code === '0') {
            this.getCurrentUserInfo()
          }
          console.log('====res:', res)
        })
        .catch(err => {
          reject(err);
        });
    },
    //如何成为企业用户
     querySearch(queryString, cb) {
        this.selectedCompanyName = queryString
        var formData = new FormData();
        formData.append('companyName', queryString || '')
        this.$axios({
            url: listCompanyName,
            method: 'post',
            data: formData
          })
            .then(res => {
              if (res.data.code === '0') {
                let companyArr = [];
                (res.data.payload || []).map( c => {
                  let obj = {};
                  obj.value = c
                  companyArr.push(obj)
                })
                this.companys = companyArr
                cb(this.companys);
              }
            })
            .catch(err => {
              reject(err);
            });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.selectedCompanyName = item.value || ''
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    getJumpToPath() {
      return new Promise((reslove,reject) => {
        //跳转到认证企业页面
        this.$axios({
          method: 'get',
          url: companyNewListAuthCompanyBaseVO
        }).then(res => {
          let len = res.data.payload.length
          if(len) {
            reslove('/company/authentication/list?basic=1&defaulttype=COMPANY_AUTH_BASIC')
            // this.$router.push({ path: '/company/authentication/list'})
          } else {
            reslove('/company/authentication/select-classify?basic=1&defaulttype=COMPANY_AUTH_BASIC')
            // this.$router.push({ path: '/company/authentication/select-classify'})
          }
        })
      })
    },
    dialogShow(){
      this.getJumpToPath().then(res => this.$router.push({ path: res}))
    },
    dialogBindShow(){
      // 跳转到绑定企业页面
      this.$router.push({ path: '/company/join?basic=1&defaulttype=COMPANY_AUTH_BASIC'})
    },
    checkCompany () {
      if (!this.selectedCompanyName) {
         this.$message({type: 'warning', message: '请选择企业'})
        return false
      }
      var formData = new FormData();
      formData.append('companyName', this.selectedCompanyName)
      this.$axios({
          url: checkCompanyByName,
          method: 'post',
          data: formData
        })
          .then(res => {
            if (res.data.code === '0') {
              this.isCompany = !!res.data.payload.id
              this.companyResultData = res.data.payload
              if (this.isCompany) {
                // 存在，去绑定
                 this.dialogBind = true
              } else {
                // 不存在，去创建
                this.dialogVisible = true
              }
               console.log('=====res:', res)
            }
          })
          .catch(err => {
            reject(err);
          });
    },
    creatCompany() {
      //跳转到认证企业页面
      this.$router.push({ path: '/company/authentication/select-classify?basic=1&defaulttype=COMPANY_AUTH_BASIC'})
    },
    bindCompany() {
      // 跳转到绑定企业页面
      this.$router.push({ path: `/company/join?basic=1&defaulttype=COMPANY_AUTH_BASIC&name=${this.companyResultData.companyName}&id=${this.companyResultData.id}`})
    }
  }
}
</script>
<style lang="less">
@import '../m-front-common/pc/assets/var.less';
.business_personal_page {
  background-color: #f4f6fb !important;
  .split_bg {
    width: 100%;
    height: 15px;
    background-color: #f4f6fb;
  }
  .separator_box {
    .el-breadcrumb {
      height: 60px;
      line-height: 60px;
      color: #999;
      font-size: 16px;
    }
    .curry_item {
      .el-breadcrumb__inner {
        color: #001700;
      }
    }

    width: 1200px;
    margin: 0 auto;
  }
  .tabs_box {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    line-height: 40px;
    .first_page {
      font-size: 16px;
      color: #999;
    }
    .business_personal_page {
      font-size: 16px;
      color: #001700;
    }
    .personal_icon {
      margin: 0 8px;
    }
  }

  height: 100%;
  background-color: #f4f6fb;
  .nav-box {
    height: 100%;
    .el-header {
      padding: 0 48px;
      background-color: #fff;
      .logo-box {
        display: flex;
        align-items: center;
        .nav-logo {
          font-size: 45px;
          color: @themeBlue;
          vertical-align: middle;
        }
        .logo-name {
          height: 53px;
          background-color: #fff;
          font-size: 22px;
          color: @themeBlue;
          font-weight: bold;
          cursor: default;
          display: flex;
          align-items: center;
        }
      }
      .user-info {
        text-align: right;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .el-input__inner {
          border: none;
        }
        .position {
          display: flex;
          align-items: center;
          margin-right: 15px;
          .positionInfo {
            display: flex;
            flex-direction: column;
          }
        }
        .info-company {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          margin-right: 30px;
        }

        .icon-group {
          width: 140px;
          display: flex;
          justify-content: space-evenly;

          .icon-btn {
            cursor: pointer;
          }

          .el-badge__content {
            border: none;
          }
        }
      }
    }
  }
}
 .page_box{
    input{
      border: none;
    }
    width: 1056px;
    height: 900px;
    margin: 0 auto;
    .title{
      width: 100%;
      height: 202px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .search_box {
      width: 500px;
      height: 48px;
      margin:0 auto;
      border:2px solid #4D84FF;
      border-radius: 3px;
      .search_icon{
        display: flex;
        justify-content: center;
        width: 50px;
        height: 48px !important;
        margin: 0;
        .search_icon_image img{
          width: 26px;
          height: 26px;
          // margin-right: 40px;
        }
      }
      .el-input__inner{
        height: 46px;
      }
      overflow: hidden;
    }
    .autocomplete_box{
      width: 100%;
      border:none;
      .el-input-group__append{
        height: 48px;
        background-color:#4d84ff;
        position: relative;
        top:-1px;
        right: -1px;
        padding: 0;
      }
    }
    .user_title{
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin-top: 50px;
    }
    .user_content{
      font-size: 16px;
      color: #666;
      margin-top: 18px;
    }
    .join_company{
      display: flex;
      justify-content: space-between;
      margin-top: 52px;
    }
    .join_company_item{
      position: relative;
      width: 500px;
      height: 216px;
      box-shadow: 0 0 8px #85AAFD;
      border-radius: 5px;
      padding: 20px;
      box-sizing: border-box;
      padding-top: 49px;
      z-index: 100;
    }
    .company_title{
      font-size: 24px;
      color: #000;
      font-weight: bold;
    }
    .company_add {
      list-style: circle;
      margin: 20px 0;
    }
    .company_add li{
      margin-left: -25px;
      font-size: 18px;
      color: #666;
    }
    .button_box{
      width: 144px;
      height: 44px;
      border-radius: 5px;
      margin-top: 5px;
    }
    .bgBusiness{
      margin-top: 34px;
    }
    .quotes{
      position: absolute;
      left: 28px;
      top:10px;
      z-index: 0;
      width: 64px;
      height: 64px;
    }
    .certification{
      position: absolute;
      right: 0;
      bottom:0;
    }
    .certification_box{
      height: 100%;
      position: relative;
      z-index: 2;
      left: 20px;
    }
    .el-dialog{
      height: 234px;
    }
    .el-dialog__footer{
      padding-top: 22px;
      border: none;
      text-align: center;
      .el-button--primary{
        border-radius: 4px;
        background: #4D84FF;
        width: 90px;
        height: 38px;
        color: #fff;
      }
      .el-button--default{
        border-radius: 4px;
        background: #f4f4f4;
        width: 90px;
        height: 38px;
        color: #666;
      }
    }
    .el-dialog__body{
      p{
        text-align: left;
      }
    }
    .el-button--primary{
      border-radius: 4px;
      background: #4D84FF;
      width: 144px;
      height: 44px;
      color: #fff;
      border-color: #4d84ff;
    }
    .el-button--default{
      border-radius: 4px;
      background: #f4f4f4;
      width: 144px;
      height: 44px;
      color: #666;
    }
  }
</style>









